//框架页面
//处理登录和404.所有的内容都将在这里展开
//框架
import React ,{useState ,Suspense} from 'react';
import {  UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout } from 'antd';
const { Header, Content, Sider } = Layout;
import RenderChildrenRouter from '../../component/RenderChildrenRouter'

//引入组件 面包屑导航
import AppMenu from '../../component/AppMenu'
//引入scss
import style from './DashView.module.scss'
//退出登录的action
import {useDispatch} from "react-redux";
import {logoutMutation} from "../../store/reducer/userReducer";
//路由跳转
import {useNavigate} from "react-router-dom";

//引入 iconfont 图标
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

function DashView ()  {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [userAvator , setUserAvator] = useState({
    state:false,
    })
    //点击用户名打开、关闭折叠菜单
    const closeUserAvator = (e) => {
        const curText = e.target.dataset.text
        if(curText=='open'){
            setUserAvator({
                ...userAvator,
                state:true
            })
        }else {
            setUserAvator({
                ...userAvator,
                state:false
            })
        }
    }
    //点击退出登录
    const logoutHanlder = ()=>{
        console.log('退出')
        navigate('/login')
        sessionStorage.setItem('token','')
        sessionStorage.setItem('route',JSON.stringify([]))
        dispatch(logoutMutation())
    }

    //修改密码
    const editPass =()=>{
        navigate('/user/passEdit')
    }
    return (
            <Layout onClick={(e)=>closeUserAvator(e)}>
                <Header style={{backgroundColor:'#aaaaaa'}} >
                    <div className={style.header_box}>
                        <div className={style.left_box}>
                            <div className={style.left_img}>
                                <img src="https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658077200&t=a28d40f78e87978de20e20e477c6d8f1" ></img>
                            </div>
                            <div className={style.left_text}  >廖氏美业门店管理系统</div>
                        </div>
                        <div className={style.right} data-text="open">
                            <div data-text="open"> <UserOutlined style={{fontSize:"24px",marginRight:'10px'}} /> {sessionStorage.getItem('username')}</div>

                            <div className={style.userAlert} style={{display:userAvator.state?'block':'none'}}>
                                <div onClick={editPass}>修改密码</div>
                                <div onClick={logoutHanlder}>退出</div>
                            </div>
                        </div>
                    </div>
                </Header>
                <Layout style={{height:window.innerHeight-64+'px'}}>
                    <Sider width={200} theme="dark" className={style.menu_sider} style={{
                        overflow: 'auto',
                        backgroundColor:"#ffffff"

                    }}>
                       <AppMenu />
                    </Sider>
                    <Layout style={{ padding: '0 10px',}} >
                        <Breadcrumb style={{margin: '6px 0', }} >
                        </Breadcrumb>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                                backgroundColor:"#ffffff"}} >
                            <Suspense fallback={<div>Loading...</div>}>

                          <RenderChildrenRouter></RenderChildrenRouter>
                                </Suspense>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>

        )

}

export default DashView;
